<template>
  <div class="facilityBox">
    <el-carousel indicator-position="outside" trigger="click"
      arrow="never" :loop="true" :interval="10000">
      <el-carousel-item class="flex_cb" v-for="(item, index) in facilityData" :key="index">
        <div class="head flex_b">
          <h1>设备：{{item.name}}</h1>
          <p class="legendBox flex">
            <span>关机</span>
            <span>故障</span>
            <span>正常</span>
          </p>
        </div>
        <div class="shaftBox flex_cc">
          <p class="timeNum even">
            <span>0:00</span>
            <span>2:00</span>
            <span>4:00</span>
            <span>6:00</span>
            <span>8:00</span>
            <span>10:00</span>
            <span>12:00</span>
            <span>14:00</span>
            <span>16:00</span>
            <span>18:00</span>
            <span>20:00</span>
            <span>22:00</span>
          </p>
          <div class="shaftBar flex">
            <div v-for="(time, index) in item.shaft" :key="index"
              :class="time >= 0 ? time == 1 ? 'blue' : 'yellow' : 'red'"></div>
          </div>
          <p class="timeNum odd">
            <span>1:00</span>
            <span>3:00</span>
            <span>5:00</span>
            <span>7:00</span>
            <span>9:00</span>
            <span>11:00</span>
            <span>13:00</span>
            <span>15:00</span>
            <span>17:00</span>
            <span>19:00</span>
            <span>21:00</span>
            <span>23:00</span>
          </p>
        </div>
        <div class="lineBox" id="lineBox">
          <ve-line :height="height" :width="width" :data="item.chartData" 
           :grid="grid" :legend="legend" :xAxis="xAxis" :yAxis="yAxis" :settings="chartSettings">
          </ve-line>
        </div>
        <div class="bottomBox flex_b">
          <v-tab :tabData="item.tabData" :tabDeploy="tabDeploy"
           :tabStyle="tabStyle1" style="width:60%">
          </v-tab>
          <div class="anomalyBox">
            <p class="anomalyTitle">异常记录</p>
            <div class="anomalyBody">
              <div v-for="anomaly in item.anomalyData" :key="anomaly.id">
                <span>>>{{anomaly.date}}</span>
                <p class="anomalyContent">{{anomaly.content}}</p>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs';
  
  import Tab from "../public/Tab.vue"

  export default {
    name: "Facility",
    components: {
      'v-tab': Tab,
    },

    data () {
      this.chartSettings = {                              //图表配置项
        labelMap: {
          'value': '产量',
        },
        smooth: true,
        showSymbol:false,
        lineStyle: {
          color: {
            type: 'linear', x: 0, y: 0, x2: 1, y2: 1,
            colorStops: [{ offset: 0, color: '#4da2cd'}, { offset: 1, color: '#9bfba6' }],
            globalCoord: false
          }
         },
        itemStyle: { color: "#3383c8" },
      }

      return {
        facilityData: [                                     //设备运行情况数据
          {
            id: 1,
            name: 'MX7B-1200',                              //设备号
            shaft: [                                        //设备运行状态
              1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,
              1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,
              1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,-1,-1,-1,-1,0,0,1,1,-1,1,1,1,1,1,1,1,1,1
            ],
            chartData: [                                    //曲线图数据
              { 'date': '05/22', 'value': 133}, { 'date': '05/23', 'value': 330}, { 'date': '05/24', 'value': 923},
              { 'date': '05/25', 'value': 123}, { 'date': '05/26', 'value': 392}, { 'date': '05/27', 'value': 493}
            ],
            tabData: [                                      //表格数据
              {id:1, date:'2018/11/22', taskNum: '123123132', dosage: 123, output: 132, volume: 123, percent: '80%', time: '72h'},
            ],
            anomalyData:[                                   //异常数据
              {id: 1, date: '2018/11/22', content: '异常描述异常描述异常描述'},
              {id: 2, date: '2018/11/22', content: '异常描述异常描述异常描述'},
              {id: 3, date: '2018/11/22', content: '异常描述异常描述异常描述异'},
              {id: 4, date: '2018/11/22', content: '异常描述异常描述异常描述'},
            ]
          },
        ],

        //计时器、图表、表格配置

        timeOut:'',
        chartData: {
          columns: ['date', 'value'],
          rows: []
        },
        height: '',
        width: '',
        legend: {show:false},
        grid: {
          width: '98%',
          height: '65%',
          top: 35
        },
        yAxis: {
          type: 'value',
          name: 'KG/h',
          nameTextStyle: {
            color: '#fff',
            fontSize: 15,
          },
          nameGap: 10,
          show: true,
          axisLine:{ 
            show: true,
            lineStyle: { color: "#25b6df", width: 2 }
          },
          axisTick: { show:false },
          axisLabel: { color: "#fff" },
          splitLine: { lineStyle:{color: "#29649d"}}
        },
        xAxis:{
          type:'category',
          show: true,
          boundaryGap: false,
          axisLine:{ show: true,
            lineStyle: { color: "#25b6df", width: 2 }
          },
          axisTick: { show:false },
          axisLabel: { show:false },
          splitLine: { 
            show:true,
            lineStyle:{color: "#29649d"}
          }
        },
        
        tabStyle1: 'tabStyle1',
        tabDeploy:[
          {label: "日期", prop: "date", width: "", align: "center", headerAlign: "center"} ,
          {label: "任务单号", prop: "taskNum", width: "", align: "center", headerAlign: "center"} ,
          {label: "用量", prop: "dosage", width: "", align: "center", headerAlign: "center"} ,
          {label: "产量", prop: "output", width: "", align: "center", headerAlign: "center"} ,
          {label: "卷数", prop: "volume", width: "", align: "center", headerAlign: "center"} ,
          {label: "成品率", prop: "percent", width: "", align: "center", headerAlign: "center"} ,
          {label: "生产时间", prop: "time", width: "", align: "center", headerAlign: "center"} ,
        ],
      }
    },

    created () {
      this.$nextTick(() => {
        var box = document.getElementById("lineBox");
        this.width = box.clientWidth + 'px';
        this.height = box.clientHeight + 'px';
      });

      this.loadFacilityData();
      
      this.facilityData.map(item => {                         //接口确定后删除
        this.chartData.rows = item.chartData;
        item.chartData = this.chartData;
      });
      
      let that = this;
      that.timeOut = setInterval(function(){
        that.loadFacilityData()
      },60*60*1000);
    },

    destroyed () {
      clearInterval(this.timeOut)
    },

    methods: {
      //加载数据
      loadFacilityData () {
        let that = this;
        axios.post(this.host+'')
        .then(res=>{
          // console.log(res.data);                              //接口确定后解开
          // that.facilityData = res.data;
          // that.facilityData.map(item => {
          //   that.chartData.rows = item.chartData;
          //   item.chartData = that.chartData;
          // });
        })
        .catch(error=>{
          console.log(error);
        });
      },

    }
  }
</script>

<style scoped>
  .facilityBox{
    width: 100%;
    height: 100%;
  }
  .head{
    margin-bottom: 10px;
  }
  .head h1{
    margin: 0;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
  }
  .head p{
    margin: 0
  }
  .legendBox{
    margin: 0;
    flex-direction: row-reverse;
    color: #fff;
    font-size: 13px;
  }
  .legendBox span{
    display: inline-block;
  }
  .legendBox span::before{
    content: '';
    width: 12px;
    height: 12px;
    margin: 0 10px 0 25px;
    display: inline-block;
    position: relative;
    top: 2px;
    border-radius: 6px;
  }
  .legendBox span:first-child::before,.shaftBar div.yellow{
    background-color: #a6937c;
  }
  .legendBox span:nth-child(2)::before,.shaftBar div.red{
    background-color: #e60012;
  }
  .legendBox span:nth-child(3)::before,.shaftBar div.blue{
    background-color: #7ecef4;
  }  
  .shaftBox{
    width: 100%;
  }
  .shaftBox p{
    margin: 0;
  }
  .shaftBar{
    height: 20px;
    border-radius: 6px;
    overflow: hidden;
  }
  .shaftBar div{
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
  }
  .numBox{
    right: -10%;
  }
  .numBox div{
    width: 100px;
    height: 70%;
    padding-right: 15px;
    box-sizing: border-box; 
    text-align: center;
    color: #fff;
    font-size: 15px;
    border-radius: 6px;
    background-color: #448aca;
  }
  .numBox span{
    display: inline-block;
    height: 20px;
    width: 100%;
  }
  .numBox::before{
    content: '';
    width: 3px;
    height: 120%;
    position: absolute;
    right: 15px;
    z-index: -1;
    background-color: #394253;
  }
  .numBox::after{
    content: '';
    display: block;
    position: absolute;
    right: 0;
    border-width: 10px 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent transparent rgb(37, 56, 79);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .timeNum{
    color: #fff;
    font-size: 12px;
  }
  .timeNum span{
    display: inline-block;
    width: 7.5%;
  }
  .timeNum.odd span{
    text-align: right;
  }
  .timeNum.even span:nth-child(2n+1){
    color: #7ecef4;
  }
  .timeNum.odd span:nth-child(2n){
    color: #7ecef4;
  }
  .lineBox{
    width: 100%;
    height: 25%;
  }
  .bottomBox{
    width: 100%;
    height: calc(80% - 120px);
  }
  .bottomBox .anomalyBox{
    width: 37%;
    height: 100%;
    margin-left: 3%;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    background: #29405a;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #3e4a74 0%, #344062 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #3e4a74), color-stop(100%, #344062));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #3e4a74 0%, #344062 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #3e4a74 0%, #344062 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #3e4a74 0%, #344062 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #3e4a74 0%, #344062 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3e4a74, endColorstr=#344062, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */  
  }
  .bottomBox .anomalyBody{
    height: calc(100% - 34px );
    overflow: auto;
    padding: 10px 15px;
    box-sizing: border-box;
  }
  .bottomBox .anomalyTitle{
    margin: 0;
    line-height: 34px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background-color: #7ecef4;
  }
  .bottomBox span{
    color: #fff;
    font-size: 14px;
  }
  .bottomBox .anomalyContent{
    height: 35px;
    margin: 5px;
    padding: 5px 10px;
    color: #bbbbbe;
    font-size: 14px;
    background-color: #181c2b;
    border-radius: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>


